import { useDnd } from '@antv/xflow';
import styled from '@emotion/styled';
import classNames from 'classnames';

import { colors } from '@/config/theme';
import { useGraph } from '@/hooks/useGraph';
import { useNodeResults } from '@/store/node-results';
import { createGraphNode } from '@/utils/graph';

import { BaseNodeProps } from '../BaseNode/define';
import { ApiNode } from '../Nodes/Api';
import { DataLoadNode } from '../Nodes/DataLoad';
import { DataModify } from '../Nodes/DataModify';
import { EndNode } from '../Nodes/End';
import { ManualNode } from '../Nodes/Manual';
import { RuleNode } from '../Nodes/Rule';
import { StartNode } from '../Nodes/Start';
import { Tools } from './tools';

const NodesPanelDiv = styled.div`
  border-bottom: 1px solid ${colors.gray['200']};
  padding-bottom: 8px;

  .node {
    max-width: 100px;
    height: 35px;
    cursor: grab;
  }
`;

export const NodesPanel = memo<HTMLElementProps>((props) => {
  const el = useRef<HTMLDivElement | null>(null);
  const [unfold, setUnfold] = useState(true);
  const { interacting } = useGraph();
  const interactingState = interacting;
  const dnd = useDnd();
  const { hasExecResult } = useNodeResults();

  const startDrag = (e: React.MouseEvent<Element, MouseEvent>, data: BaseNodeProps<any>) => {
    if (hasExecResult) {
      return;
    }
    dnd.startDrag(createGraphNode(data.nodeType!, data), e);
  };

  return (
    <NodesPanelDiv className={classNames('nodes-panel', props.className)}>
      <div ref={el} className={interactingState ? 'pt-8 px-12 bg-gray-50 rounded-8px' : ''}>
        {interactingState && (
          <div className="report-switch flex justify-between h-32">
            <Tools />
            <div
              className="ml-16 color-primary-500 flex items-center cursor-pointer select-none"
              onClick={() => {
                setUnfold(!unfold);
              }}>
              <span className="mr-4 text-14 ">{unfold ? '收起节点' : '展开节点'}</span>
              {unfold ? <i className="i-solar:alt-arrow-up-outline"></i> : <i className="i-solar:alt-arrow-down-line-duotone" />}
            </div>
          </div>
        )}

        <div
          style={{
            height: interactingState && unfold ? '40px' : '0',
            transform: interactingState && unfold ? 'scaleY(1)' : 'scaleY(0)'
          }}
          className="overflow-hidden transition-all flex flex-row gap-12 flex-wrap pt-4">
          {/* 开始节点 */}
          <StartNode onStartDrag={startDrag} />
          {/* 数据加载 */}
          <DataLoadNode onStartDrag={startDrag} />
          {/* 数据更新 */}
          <DataModify onStartDrag={startDrag} />
          {/* Api加载 */}
          <ApiNode onStartDrag={startDrag} />
          {/* 规则节点 */}
          <RuleNode onStartDrag={startDrag} />
          {/* 人工节点 */}
          <ManualNode onStartDrag={startDrag} />
          {/* 结束节点 */}
          <EndNode onStartDrag={startDrag} />
        </div>
      </div>
    </NodesPanelDiv>
  );
});

// {/* 自动处理节点 */}
// <AutomaticNode  onStartDrag={startDrag} />
